<template>
	<view class="wrap" >
		<u-form class="form" :rules="rules" :model="user" ref="uForm">
			<u-gap height="20" bg-color="#f5f5f5"></u-gap>
			<u-cell-item title="头像" :arrow="true">
				<u-avatar size="60" bg-color='#000;'  src="/static/aidex/images/user01.png" @click="chooseAvatar" style="position: absolute;right: 35px;top:12px;"></u-avatar>
			</u-cell-item>
			<u-form-item label="用户昵称" prop="nickName" label-width="180">
				<u-input type="text" v-model="user.nickName"></u-input>
			</u-form-item>
			<u-form-item label="手机号码" prop="phonenumber" label-width="180">
				<u-input type="text" v-model="user.phonenumber"></u-input>
			</u-form-item>
			<u-form-item label="邮箱" prop="email" label-width="180">
				<u-input type="text" v-model="user.email"></u-input>
			</u-form-item>
			<u-form-item label="性别" label-width='180'>
				<u-radio-group v-model="user.sex">
					<u-radio :name='0'>男</u-radio>
					<u-radio :name='1'>女</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form>
		<view class="form-footer">
			<u-button class="btn" type="primary" @click="submit">提交</u-button>
			<u-button class="btn" type="default" @click="cancel">关闭</u-button>
		</view>
	</view>
</template>
<script>
/**
 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
 */
export default {
	// props:{
	// 	user:{
	// 		type:Object,
	// 	}
	// },
	data(){
		return{
			user:{
				nickName:"",
				email:'',
				phonenumber:'',
				sex:'',
			},
			rules: {
			    nickName: [
			        { required: true, message: "用户昵称不能为空", trigger: "blur" }
			    ],
			    email: [
			      { required: true, message: "邮箱地址不能为空", trigger: "blur" },
		          {
		            type: "email",
		            message: "请输入正确的邮箱地址",
		            trigger: ["blur", "change"]
		          }
		        ],
		        phonenumber: [
		          { required: true, message: "手机号码不能为空", trigger: "blur" },
		          {
		            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
		            message: "请输入正确的手机号码",
		            trigger: "blur"
		          }
			    ],
		      },
		}
	},
	// onReady() {
	// 	this.$refs.uForm.setRules(this.rules);
	// },
	onLoad() {
		this.$u.api.getUserInfo().then(res => {
			if (res.code == '200'){
				this.user = {
					// id: res.user.id,
					// name: res.user.userName,
					sex: res.user.sex,
					// deptName:res.user.dept.deptName,
					email: res.user.email,
					phonenumber: res.user.phonenumber,
					// officeTel: res.user.officeTel,
					// loginDate: res.user.loginDate,
					// loginIp: res.user.loginIp,
					nickName:res.user.nickName
			  }
			}else if (res.result == 'login'){
				uni.reLaunch({
					url: '/pages/sys/login/index'
				});
			}else{
				this.$u.toast(res.message);
			}
		});
		uni.$on('uAvatarCropper', path => {
			this.avatarBase64 = path;
		})
	},
	methods:{
		submit(){
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.$u.api.user.saveUserInfo(
					this.user
						).then(res => {
						if(res.code == '200'){
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false,
								success: function () {
									uni.navigateBack();
								}
							});
						}else{
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false
							});
						}
					});
				} else {
					this.$u.toast('您填写的信息有误，请根据提示修正。');
				}
			});
		},
		cancel(){
			uni.navigateBack();
		},
	},
	
};
</script>
<style lang="scss" scoped>
page {
	background-color: #f5f5f5;
}
.title {
	display: flex;
	margin: 30rpx 0 10px;
	font-size: 50rpx;
}
.version {
	margin-bottom: 10rpx;
	font-size: 40rpx;
}
.copyright {
	margin-top: 50rpx;
	text-align: center;
	line-height: 60rpx;
	color: #999;
}
.cade-box{
	uni-image{
		width: 120px;
		height:120px;
		border: 1px solid #dcdcdc;
		padding: 5px;
		background: #ffffff;
	}
}
.cade-text{
	color: #999999;
	font-size:12px;
}
</style>
